<!-- 车辆维护 -->
<template>
  <view class="content">
    <u-form :model="form" ref="uForm" :label-width="240">
      333
      <!-- <view class="form-title">车主信息</view>
      <u-form-item
        label="车主姓名"
        prop="carOwnerName"
        class="form-item-box"
        left-icon="star-fill"
        :left-icon-style="{
          color: 'red',
          'font-size': '18rpx',
        }"
      >
        <u-input v-model="form.carOwnerName" placeholder="请输入车主姓名" />
      </u-form-item>
      <u-form-item
        label="车主电话"
        prop="carOwnerMobile"
        class="form-item-box"
        left-icon="star-fill"
        :left-icon-style="{
          color: 'red',
          'font-size': '18rpx',
        }"
      >
        <u-input
          v-model="form.carOwnerMobile"
          maxlength="11"
          placeholder="请输入车主电话"
        />
      </u-form-item> -->
      <view class="form-title"
        >车辆信息
        <!-- <view class="default-check">
          设为默认
          <u-checkbox-group>
            <u-checkbox v-model="form.checked"> </u-checkbox>
          </u-checkbox-group>
        </view> -->
      </view>
      <u-form-item
        label="车牌号"
        prop="carNo"
        class="form-item-box"
        left-icon="star-fill"
        :left-icon-style="{
          color: 'red',
          'font-size': '18rpx',
        }"
      >
        <u-input
          v-model="form.carNo"
          maxlength="8"
          placeholder="请输入车牌号"
          @on-blur="upperCase"
        />
      </u-form-item>
      <!-- <u-form-item
        label="车型"
        prop="carTypeName"
        class="form-item-box"
        left-icon="star-fill"
        :left-icon-style="{
          color: 'red',
          'font-size': '18rpx',
        }"
      >
        <u-input
          v-model="form.carTypeName"
          type="select"
          @click="carTypeShow = true"
          placeholder="请选择车型"
        />
        <u-select
          v-model="carTypeShow"
          mode="single-column"
          :list="carTypelist"
          @confirm="carTypeconfirm"
        ></u-select>
      </u-form-item>
      <u-form-item
        label="排放标准"
        prop="emissionStandardsName"
        class="form-item-box"
        left-icon="star-fill"
        :left-icon-style="{
          color: 'red',
          'font-size': '18rpx',
        }"
      >
        <u-input
          v-model="form.emissionStandardsName"
          type="select"
          @click="emissionStandardsShow = true"
          placeholder="请选择排放标准"
        />
        <u-select
          v-model="emissionStandardsShow"
          mode="single-column"
          :list="emissionStandardslist"
          @confirm="emissionStandardsconfirm"
        ></u-select>
      </u-form-item>
      <u-form-item
        label="燃料类型"
        prop="fuelTypeName"
        class="form-item-box"
        left-icon="star-fill"
        :left-icon-style="{
          color: 'red',
          'font-size': '18rpx',
        }"
      >
        <u-input
          v-model="form.fuelTypeName"
          type="select"
          @click="fuelTypeShowFc"
          placeholder="请选择燃料类型"
        />
        <u-select
          v-model="fuelTypeShow"
          mode="single-column"
          :list="fuelTypelist"
          @confirm="fuelTypeconfirm"
        ></u-select>
      </u-form-item>
      <u-form-item
        label="车货总重"
        prop="carWeight"
        class="form-item-box"
        left-icon="star-fill"
        :left-icon-style="{
          color: 'red',
          'font-size': '18rpx',
        }"
      >
        <u-input v-model="form.carWeight" placeholder="请输入车货总重" />
      </u-form-item>
      <u-form-item
        label="轴数"
        prop="axlNum"
        class="form-item-box"
        left-icon="star-fill"
        :left-icon-style="{
          color: 'red',
          'font-size': '18rpx',
        }"
      >
        <u-input v-model="form.axlNum" placeholder="请输入轴数" />
      </u-form-item> -->
      <view class="form-title">行驶证</view>
      <u-form-item
        label="车头行驶证"
        left-icon="star-fill"
        :left-icon-style="{
          color: 'red',
          'font-size': '18rpx',
        }"
      >
        <u-upload
          class="uUpload-box"
          ref="uUpload1"
          :action="uploadUrl"
          @on-success="headLicensesuccess"
          @on-remove="headLicenseremove"
          @on-error="testerror"
          max-count="1"
          :form-data="uploaderData"
        ></u-upload>
      </u-form-item>
      <u-form-item
        label="挂车行驶证"
        left-icon="star-fill"
        :left-icon-style="{
          color: 'red',
          'font-size': '18rpx',
        }"
      >
        <u-upload
          class="uUpload-box"
          ref="uUpload2"
          :action="uploadUrl"
          @on-success="attachLicensesuccess"
          @on-remove="attachLicenseremove"
          @on-error="testerror"
          max-count="1"
          :form-data="uploaderData"
        ></u-upload>
      </u-form-item>
      <view class="form-title">道路运输证</view>
      <div class="u-flex top-box">
        <u-form-item
          class="width-50"
          label-position="top"
          label="车头运输证"
          left-icon="star-fill"
          :left-icon-style="{
            color: 'red',
            'font-size': '18rpx',
          }"
        >
          <u-upload
            ref="uUpload"
            :action="uploadUrl1"
            @on-success="headTranssuccess"
            @on-remove="headTransremove"
            @on-error="testerror"
            max-count="1"
            :form-data="uploaderData"
          ></u-upload>
        </u-form-item>
        <u-form-item
          class="width-50"
          label-position="top"
          label="挂车运输证"
          left-icon="star-fill"
          :left-icon-style="{
            color: 'red',
            'font-size': '18rpx',
          }"
        >
          <u-upload
            ref="uUpload"
            :action="uploadUrl1"
            @on-success="attachTranssuccess"
            @on-remove="attachTransremove"
            @on-error="testerror"
            max-count="1"
            :form-data="uploaderData"
          ></u-upload>
        </u-form-item>
      </div>
      <view class="form-title">附属资料</view>
      <div class="u-flex top-box">
        <u-form-item
          class="width-50"
          label-position="top"
          label="环保清单"
          left-icon="star-fill"
          :left-icon-style="{
            color: 'red',
            'font-size': '18rpx',
          }"
        >
          <u-upload
            ref="uUpload"
            :action="uploadUrl1"
            @on-success="eProtectionSheetsuccess"
            @on-remove="eProtectionSheetremove"
            @on-error="testerror"
            max-count="1"
            :form-data="uploaderData"
          ></u-upload>
        </u-form-item>
        <u-form-item
          class="width-50"
          label-position="top"
          label="车辆照片"
          left-icon="star-fill"
          :left-icon-style="{
            color: 'red',
            'font-size': '18rpx',
          }"
        >
          <u-upload
            ref="uUpload"
            :action="uploadUrl1"
            @on-success="carPhotosuccess"
            @on-remove="carPhotoremove"
            @on-error="testerror"
            max-count="1"
            :form-data="uploaderData"
          ></u-upload>
        </u-form-item>
      </div>
    </u-form>
    <u-button type="primary" @click="submit" class="vehiclemanagement-index-btn"
      >提交</u-button
    >
    <!-- 用来提示 -->
    <u-toast ref="uToast" />
  </view>
</template>
<script>
import { v_integer } from './../../common/util.js'
export default {
  data() {
    // 牌号验证
    const carNoRuls = async (rule, value, callback) => {
      let reg =
        /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}(([A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$)|([0-9]{5}[DF]$)|([DF][A-HJ-NP-Z0-9][0-9]{4}$))/
      // let reg = /^[\u4e00-\u9fa5]{1}[A-Z]{1}[A-Z_0-9]{5}$/
      if (!value) {
        return callback(new Error('请输入车牌号'))
      } else if (!reg.test(value)) {
        return callback(new Error('请检查车牌号格式是否正确'))
      } else {
        callback()
      }
    }

    return {
      uploadUrl:
        'https://lygwl.tzszxx.com/prod/api/freight-business/ocr/recognize/vehicleLicense',
      uploadUrl1:
        'https://lygwl.tzszxx.com/prod/api/freight-business/file/app/upload',
      uploaderData: {
        bucketName: 'app',
        folderName: 'photo',
      },
      form: {
        carOwnerName: undefined, //车主姓名
        carOwnerMobile: undefined, //车主电话
        carNo: undefined, //车牌号
        carType: undefined, //车型
        carTypeName: undefined, //车型1
        emissionStandards: undefined, //排放标准
        emissionStandardsName: undefined, //排放标准1
        fuelType: undefined, //燃料类型
        fuelTypeName: undefined, //燃料类型1
        carWeight: undefined, //车货总重
        axlNum: undefined, //轴数
        ascriptionType: '0',
        headLicense: undefined, //车头行驶证,
        attachLicense: undefined, //挂车行驶证,
        headTrans: undefined, //车头运输证,
        attachTrans: undefined, //挂车运输证,
        eProtectionSheet: undefined, //环保清单 ,
        carPhoto: undefined, //车辆照片 ,
      },
      carTypeShow: false,
      carTypelist: [
        {
          label: '前四后八',
          value: '1',
        },
        {
          label: '平板',
          value: '2',
        },
        {
          label: '六轴双驱',
          value: '3',
        },
        {
          label: '半挂牵引车',
          value: '4',
        },
        {
          label: '前四后四',
          value: '5',
        },
        {
          label: '中型自卸货车',
          value: '6',
        },
        {
          label: '六轴单驱',
          value: '7',
        },
      ],
      emissionStandardsShow: false,
      emissionStandardslist: [
        {
          label: '国五',
          value: '1',
        },
        {
          label: '国六',
          value: '2',
        },
        {
          label: '其他',
          value: '3',
        },
        {
          label: '新能源',
          value: '4',
        },
      ],
      fuelTypeShow: false,
      fuelTypelist: [],
      fuelTypelist1: [
        {
          label: '天然气',
          value: '1',
        },
        {
          label: '柴油',
          value: '2',
        },
        {
          label: '电动',
          value: '3',
        },
        {
          label: '汽油',
          value: '4',
        },
        {
          label: '其他',
          value: '5',
        },
      ],
      rules: {
        carOwnerName: [
          {
            required: true,
            message: '请输入车主姓名',
            // 可以单个或者同时写两个触发验证方式
            trigger: 'blur',
          },
        ],
        carOwnerMobile: [
          {
            required: true,
            message: '请输入车主电话',
            trigger: ['change', 'blur'],
          },
          {
            // 自定义验证函数，见上说明
            validator: (rule, value, callback) => {
              // 上面有说，返回true表示校验通过，返回false表示不通过
              // this.$u.test.mobile()就是返回true或者false的
              return this.$u.test.mobile(value)
            },
            message: '手机号码不正确',
            // 触发器可以同时用blur和change
            trigger: ['change', 'blur'],
          },
        ],
        carNo: [
          // { required: true, message: '请输入车牌号', trigger: 'blur' }

          {
            required: true,
            validator: carNoRuls,
            trigger: ['change', 'blur'],
          },
        ],
        carTypeName: [
          {
            required: true,
            message: '请选择车型',
            trigger: ['change', 'blur'],
          },
        ],
        emissionStandardsName: [
          {
            required: true,
            message: '请选择排放标准',
            trigger: ['change', 'blur'],
          },
        ],
        fuelTypeName: [
          {
            required: true,
            message: '请选择燃料类型',
            trigger: ['change', 'blur'],
          },
        ],
        carWeight: [
          {
            required: true,
            validator: v_integer('请输入车货总重'),
            trigger: ['change', 'blur'],
          },
        ],
        axlNum: [
          {
            required: true,
            validator: v_integer('请输入轴数'),
            trigger: ['change', 'blur'],
          },
        ],
      },
      maxSize: 1024 * 1024 * 4,
    }
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules)
  },
  watch: {
    'form.carNo'(val, old) {
      this.upperCase(val)
    },
  },
  mounted() {
    this.fuelTypelist = this.fuelTypelist1
  },
  methods: {
    //字符串中小写转大写
    upperCase(str) {
      let arr = str.split('')
      let newStr = ''
      // 通过数组的forEach方法来遍历数组
      arr.forEach(function (value) {
        if (value >= 'a' && value <= 'z') newStr += value.toUpperCase()
        else newStr += value
      })
      this.form.carNo = newStr
    },
    //屏蔽键盘
    hideKeyBorder(e) {
      uni.hideKeyboard()
    },
    //车型选择
    carTypeconfirm(val) {
      this.form.carTypeName = val[0].label
      this.form.carType = val[0].value
    },
    //排放标准选择
    emissionStandardsconfirm(val) {
      this.form.emissionStandardsName = val[0].label
      this.form.emissionStandards = val[0].value
      this.form.fuelTypeName = ''
      this.form.fuelType = ''
      if (val[0].label == '新能源') {
        this.fuelTypelist = this.fuelTypelist1.filter(
          (i) => i.label == '电动' || i.label == '天然气'
        )
      } else {
        this.fuelTypelist = this.fuelTypelist1
          .filter((i) => i.label != '电动')
          .filter((i) => i.label != '天然气')
      }
    },
    //燃料类型下拉开启
    fuelTypeShowFc() {
      if (this.form.emissionStandards) {
        this.fuelTypeShow = true
      } else {
        this.$api.msg('请先选择排放标准')
      }
    },
    //燃料类型
    fuelTypeconfirm(val) {
      this.form.fuelTypeName = val[0].label
      this.form.fuelType = val[0].value
    },
    //车头行驶证上传
    headLicensesuccess(data, index, lists, name) {
      if (data.code == '0') {
        this.form.headLicense = data.result.imgUrl
        // this.form.carNo = data.result.numbder
      } else {
        this.$api.msg(data.message)
        this.$refs.uUpload1.lists = []
      }
    },
    //车头行驶证上传删除
    headLicenseremove(data, index, lists, name) {
      this.form.headLicense = ''
    },
    //挂车行驶证上传
    attachLicensesuccess(data, index, lists, name) {
      if (data.code == '0') {
        this.form.attachLicense = data.result.imgUrl
      } else {
        this.$api.msg(data.message)
        this.$refs.uUpload2.lists = []
      }
    },
    //挂车行驶证上传删除
    attachLicenseremove(data, index, lists, name) {
      this.form.attachLicense = ''
    },
    //车头运输证上传
    headTranssuccess(data, index, lists, name) {
      this.form.headTrans = data.result
    },
    //车头运输证上传删除
    headTransremove(data, index, lists, name) {
      this.form.headTrans = ''
    },
    //挂车运输证上传
    attachTranssuccess(data, index, lists, name) {
      this.form.attachTrans = data.result
    },
    //挂车运输证上传删除
    attachTransremove(data, index, lists, name) {
      this.form.attachTrans = ''
    },
    //环保清单上传
    eProtectionSheetsuccess(data, index, lists, name) {
      this.form.eProtectionSheet = data.result
    },
    //环保清单上传删除
    eProtectionSheetremove(data, index, lists, name) {
      this.form.eProtectionSheet = ''
    },
    //车辆照片上传
    carPhotosuccess(data, index, lists, name) {
      this.form.carPhoto = data.result
    },
    //车辆照片上传删除
    carPhotoremove(data, index, lists, name) {
      this.form.carPhoto = ''
    },
    //上传失败
    testerror(res, index, lists, name) {
      this.$api.msg('上传失败')
    },
    // 提示
    showToast(title, type) {
      this.$refs.uToast.show({
        title,
        type: type || 'error',
      })
    },
    //提交
    submit() {
      this.$refs.uForm.validate((valid) => {
        if (valid) {
          let attachedPhotos = {
            headLicense: this.form.headLicense,
            attachLicense: this.form.attachLicense,
            headTrans: this.form.headTrans,
            attachTrans: this.form.attachTrans,
            eProtectionSheet: this.form.eProtectionSheet,
            carPhoto: this.form.carPhoto,
          }
          this.form.attachedPhotos = JSON.stringify(attachedPhotos)
          this.postData(this.form)
        } else {
          this.$api.msg('请填写相关信息')
        }
      })
    },
    // 提交数据
    postData(data) {
      let photoList = [
        'headLicense',
        'attachLicense',
        'headTrans',
        'attachTrans',
        'eProtectionSheet',
        'carPhoto',
      ]
      let tagShow = true
      photoList.forEach((item) => {
        if (!data[item] || data[item] == undefined) {
          tagShow = false
        }
      })
      let obj = {
        ...data,
      }
      if (tagShow) {
        this.submitData(obj)
      } else {
        this.$api.msg('部分图片未上传')
      }
    },
    // 车辆添加提交
    async submitData(val) {
      const { code, result, message } = await this.$u.post(
        '/freight-business/driver/car/add',
        val
      )
      if (code === '0') {
        this.$api.msg('车辆添加成功')
        setTimeout(() => {
          uni.switchTab({
            url: '/pages/tabbar/my/my',
          })
        }, 200)
      } else {
        this.$api.msg(message)
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.content {
  padding: 16rpx;
  width: 100%;

  .top-box {
    .width-50 {
      flex: 1;
    }
  }
}
.form-title {
  font-weight: 600;
  font-size: 32rpx;
  padding: 16rpx 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.default-check {
  display: flex;
  color: #2979ff;
  font-size: 30rpx;
  // justify-content: space-between;
  align-items: center;
}
.form-item-box {
  background: red;
}
.vehiclemanagement-index-btn {
  width: 100%;
}
.uUpload-box {
  /deep/.u-list-item {
    background-image: url('https://minio.wskjwl.com/uipicture/xingshizheng.png');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
  }
}
</style>
